<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="adminName" @clear="getAdminList">
                        <el-button slot="append" icon="el-icon-search" @click="getAdminList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="adminList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="adminName"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="手机" prop="tel"></el-table-column>
                <el-table-column label="是否冻结">
                  <template slot-scope="scope">
                    <span v-if="scope.row.locked=='1'" style='color: red'>冻结中</span>
                    <span v-if="scope.row.locked=='0'" style='color: greenyellow'>正常</span>
                  </template>
                </el-table-column>
                <el-table-column label="角色">
                    <template slot-scope="scope">{{getRoleNames(scope.row.roles)}}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.locked == 0" type="primary" size="mini" @click="changeFrozen(scope.row.id,1)">冻结</el-button>
                        <el-button v-if="scope.row.locked == 1" type="success" size="mini" @click="changeFrozen(scope.row.id,0)">解冻</el-button>

                        <el-button type="danger" size="mini" @click="removeUserById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10,15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加用戶-->
        <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addAdminFormClose">
            <el-form
                    :model="addAdminForm"
                    :rules="addAdminFormRules"
                    ref="addUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="用戶名" prop="adminName">
                    <el-input v-model="addAdminForm.adminName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addAdminForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="tel">
                    <el-input v-model="addAdminForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addAdminForm.email"></el-input>
                </el-form-item>

                <el-form-item label="角色" prop="roleIds">
                    <el-select v-model="addAdminForm.roleIds" multiple placeholder="请选择角色">
                        <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否锁定" prop="locked">
                    <el-select v-model="addAdminForm.locked" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAdmin">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
        <!--修改用戶-->
        <el-dialog
                title="修改用戶"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editAdminFormClose"
        >
            <el-form
                    :model="editAdminForm"
                    :rules="editAdminFormRules"
                    ref="editUserFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
              <el-input type="hidden" v-model="editAdminForm.id"></el-input>
                <el-form-item label="用戶名" prop="adminName">

                  <el-input v-model="editAdminForm.adminName"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="tel">
                    <el-input v-model="editAdminForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editAdminForm.email"></el-input>
                </el-form-item>


                <el-form-item label="角色" prop="roleIds">
                    <el-select v-model="editAdminForm.roleIds" multiple placeholder="请选择角色">
                        <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否锁定" prop="locked">
                    <el-select v-model="editAdminForm.locked" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editAdmin">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                editDialogVisible: false,
                swflag: false,
                pageNum: 1,
                pageSize: 5,
                adminList: [],
                roleList: [], //系统中所有的角色
                // userRoleList: [], //用户拥有的角色
                total: 0,
                adminName: "",
                addDialogVisible: false,
                addAdminForm: {
                    adminName: "",
                    password: "",
                    locked: "0",
                    roleIds: "",
                    email: "",
                    tel: ""
                },
                editAdminForm: {
                  id: -1,
                  adminName: "",
                  password: "",
                  locked: "",
                  roleIds: "",
                  email: "",
                  tel: ""
                },
                editAdminFormRules: {
                  adminName: [
                    { required: true, message: "请输入用戶名", trigger: "blur" },
                    { min: 3, max: 8, message: "用戶名在3-8个字符之間", trigger: "blur" }
                  ],
                  password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 3, max: 8, message: "密码在3-8个字符之间", trigger: "blur" }
                  ],
                  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                  roleIds: [{type:'array', required: true, message: '请至少赋予一个角色', trigger: 'blur,change' }],
                  locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                },
                addAdminFormRules: {
                  adminName: [
                    { required: true, message: "请输入用戶名", trigger: "blur" },
                    { min: 3, max: 12, message: "用戶名在3-12个字符之間", trigger: "blur" }
                  ],
                  password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 3, max: 8, message: "密码在3-8个字符之间", trigger: "blur" }
                  ],
                  tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                  roleIds: [{ type:'array',required: true, message: '请至少赋予一个角色', trigger: 'blur,change' }],
                  locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                }
            };
        },
        methods: {
            async removeUserById(id) {
                let url = "manager/del/"+id;
              this.$axios.delete(url)
                  .then(res=>{
                    if (res.data.code == 200){
                      this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1000
                      });
                      this.getAdminList();
                    }else {
                      this.$message({
                        message:res.data.msg,
                        type:"error",
                        duration:1000
                      })
                    }
                  })
            },
            changeFrozen(id,status){
               let url = "manager/changeLocked";
               this.$axios.get(url,{
                 params:{
                   id:id,
                   status:status
                 }
               }).then(res=>{
                 if (res.data.code == 200){
                   this.$message({
                     type:'success',
                     message:res.data.msg,
                     duration:1000
                   });
                   this.getAdminList();
                 }else {
                   this.$message({
                     message:res.data.msg,
                     type:"error",
                     duration:1000
                   })
                 }
               })

            },
            showEditDialog(row) {
                // this.editDialogVisible = true;
                // this.editUserForm = JSON.parse(JSON.stringify(row));
                // for(let r of row.roles){
                //   this.userRoleList.push(r.id);
                // }
                this.editDialogVisible = true;
                this.editAdminForm = JSON.parse(JSON.stringify(row));
                let arr = row.roles;
                this.editAdminForm.roleIds=[];
                for (let r of arr){
                  this.editAdminForm.roleIds.push(r.id)
                }
            },
            editAdminFormClose() {
                this.$refs.editUserFormRef.resetFields();
                this.userRoleList = [];
                this.editAdminForm.roleIds = "";
            },
            editAdmin() {
                this.$refs.editUserFormRef.validate(valid=>{
                  if(!valid){
                    return;
                  }else{
                    let url = "manager/modify";
                    console.log(this.editAdminForm)
                    this.$axios.put(url,this.editAdminForm)
                        .then(res=>{
                          if (res.data.code == 200){
                            this.$message({
                              type:'success',
                              message:res.data.msg,
                              duration:1000
                            });
                            this.getAdminList();
                            this.$refs.editUserFormRef.resetFields();
                            this.editDialogVisible = false;
                          }else {
                            this.$message({
                              message:res.data.msg,
                              type:"error",
                              duration:1000
                            })
                          }
                        })
                  }
                })

            },
            addAdmin() {
              this.$refs.addUserFormRef.validate(valid => {
                    if (!valid){
                      return;
                    } else {
                      let url = "manager/add";
                      console.log(this.addAdminForm)
                      this.$axios.put(url,this.addAdminForm)
                          .then(res=>{
                            if (res.data.code == 200){
                              this.$message({
                                type:'success',
                                message:res.data.msg,
                                duration:1000
                              });
                              this.getAdminList();
                              this.$refs.addUserFormRef.resetFields();
                              this.addDialogVisible = false;
                            }else {
                              this.$message({
                                message:res.data.msg,
                                type:"error",
                                duration:1000
                              })
                            }
                          })
                    }
              })
            },
            addAdminFormClose() {
                this.$refs.addUserFormRef.resetFields();
                this.addAdminForm.roleIds = "";
            },
            getAdminList() {
              let url  = "manager/list";
              this.$axios.get(url,{
                params:{
                  now: this.pageNum,
                  size: this.pageSize,
                  name: this.adminName,
                }
              }).then(res=>{
                // console.log("+++++++++++++++++==")
                // console.log(res)
                if (res.data.code == 200){
                  this.adminList = res.data.data.list;
                  this.total = res.data.data.total;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                }else {
                  this.$message({
                    message:res.data.msg,
                    type:"error",
                    duration:1000
                  })
                }
              })
            },

            getRoleList() {
                let url = "role/getAll";
                this.$axios.get(url)
                    .then(res=>{
                      if (res.data.code == 200){
                        this.roleList = res.data.data;
                      }else {
                        this.$message({
                          message:res.data.msg,
                          type:"error",
                          duration:1000
                        })
                      }
                    })

            },
            searchAdmin() {
                this.pageNum = 1;
                this.pageSize = 5;
                this.getAdminList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
              this.getAdminList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
              this.getAdminList();
            },
            //把用户对象中包含的roleList其中的rolename转换为逗号分隔的字符串
            getRoleNames(arr) {
                if (!arr) return;
                let roleNameArr = new Array();
                for (let i = 0; i < arr.length; i++) {
                    roleNameArr.push(arr[i].name);
                }
                return roleNameArr.join(",");
            },

            reloadData() {
                this.searchAdmin();
                this.getRoleList();
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>